<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0px auto;}
        div#d1{
            border:solid 1px #333333;
            width: 120px;
            height: 120px;
            background : url("../image/gamebg.jpg") no-repeat -0px -0px;
            animation: showme1 0.8s infinite;

        }
        @keyframes showme1 {
            0% {
                background : url("../image/gamebg.jpg") no-repeat -0px -0px;
            }
            9% {
                background : url("../image/gamebg.jpg") no-repeat -0px -0px;
            }
            10% {
                background : url("../image/gamebg.jpg") no-repeat -120px -0px;
            }
            19% {
                background : url("../image/gamebg.jpg") no-repeat -120px -0px;
            }
            20% {
                background : url("../image/gamebg.jpg") no-repeat -240px -0px;
            }
            29% {
                background : url("../image/gamebg.jpg") no-repeat -240px -0px;
            }
            30% {
                background : url("../image/gamebg.jpg") no-repeat -360px -0px;
            }39% {
                 background : url("../image/gamebg.jpg") no-repeat -360px -0px;
             }
            40% {
                background : url("../image/gamebg.jpg") no-repeat -480px -0px;
            }
            49% {
                background : url("../image/gamebg.jpg") no-repeat -480px -0px;
            }
            50% {
                background : url("../image/gamebg.jpg") no-repeat -600px -0px;
            } 59% {
                  background : url("../image/gamebg.jpg") no-repeat -600px -0px;
              }
            60% {
                background : url("../image/gamebg.jpg") no-repeat -720px -0px;
            } 69% {
                  background : url("../image/gamebg.jpg") no-repeat -720px -0px;
              }
            70% {
                background : url("../image/gamebg.jpg") no-repeat -840px -0px;
            } 79% {
                  background : url("../image/gamebg.jpg") no-repeat -840px -0px;
              }
            80% {
                background : url("../image/gamebg.jpg") no-repeat -960px -0px;
            }
            89% {
                background : url("../image/gamebg.jpg") no-repeat -960px -0px;
            }
            90% {
                background : url("../image/gamebg.jpg") no-repeat -1080px -0px;
            }
            99% {
                background : url("../image/gamebg.jpg") no-repeat -1080px -0px;
            }

            100% {
                background : url("../image/gamebg.jpg") no-repeat -1200px -0px;
            }
        }

        div#d2{
               border:solid 1px #333333;
               width: 120px;
               height: 120px;
               background : url("../image/gamebg.jpg") no-repeat -0px -120px;

            animation: showme2 0.8s infinite;
           }

        @keyframes showme2 {
            0% {
                background : url("../image/gamebg.jpg") no-repeat -0px -120px;
            }
            9% {
                background : url("../image/gamebg.jpg") no-repeat -0px -120px;
            }
            10% {
                background : url("../image/gamebg.jpg") no-repeat -120px -120px;
            }
            19% {
                background : url("../image/gamebg.jpg") no-repeat -120px -120px;
            }
            20% {
                background : url("../image/gamebg.jpg") no-repeat -240px -120px;
            }
            29% {
                 background : url("../image/gamebg.jpg") no-repeat -240px -120px;
             }
            30% {
                background : url("../image/gamebg.jpg") no-repeat -360px -120px;
            }39% {
                 background : url("../image/gamebg.jpg") no-repeat -360px -120px;
             }
            40% {
                background : url("../image/gamebg.jpg") no-repeat -480px -120px;
            }
            49% {
                background : url("../image/gamebg.jpg") no-repeat -480px -120px;
            }
            50% {
                background : url("../image/gamebg.jpg") no-repeat -600px -120px;
            } 59% {
                  background : url("../image/gamebg.jpg") no-repeat -600px -120px;
              }
            60% {
                background : url("../image/gamebg.jpg") no-repeat -720px -120px;
            } 69% {
                  background : url("../image/gamebg.jpg") no-repeat -720px -120px;
              }
            70% {
                background : url("../image/gamebg.jpg") no-repeat -840px -120px;
            } 79% {
                  background : url("../image/gamebg.jpg") no-repeat -840px -120px;
              }
            80% {
                background : url("../image/gamebg.jpg") no-repeat -960px -120px;
            }
            89% {
                background : url("../image/gamebg.jpg") no-repeat -960px -120px;
            }
            90% {
                background : url("../image/gamebg.jpg") no-repeat -1080px -120px;
            }
            99% {
                background : url("../image/gamebg.jpg") no-repeat -1080px -120px;
            }

            100% {
                background : url("../image/gamebg.jpg") no-repeat -1200px -120px;
            }
        }
        div#d3{
                  border:solid 1px #333333;
                  width: 120px;
                  height: 120px;
                  background : url("../image/gamebg.jpg") no-repeat -0px -240px;
            animation: showme3 1s infinite;
              }
        @keyframes showme3 {
            0% {
                background: url("../image/gamebg.jpg") no-repeat -0px -240px;
            }
            9% {
                background: url("../image/gamebg.jpg") no-repeat -0px -240px;
            }
            10% {
                background: url("../image/gamebg.jpg") no-repeat -120px -240px;
            }
            19% {
                background: url("../image/gamebg.jpg") no-repeat -120px -240px;
            }
            20% {
                background: url("../image/gamebg.jpg") no-repeat -240px -240px;
            }
            29% {
                background: url("../image/gamebg.jpg") no-repeat -240px -240px;
            }
            30% {
                background: url("../image/gamebg.jpg") no-repeat -360px -240px;
            }
            39% {
                background: url("../image/gamebg.jpg") no-repeat -360px -240px;
            }
            40% {
                background: url("../image/gamebg.jpg") no-repeat -480px -240px;
            }
            49% {
                background: url("../image/gamebg.jpg") no-repeat -480px -240px;
            }
            50% {
                background: url("../image/gamebg.jpg") no-repeat -600px -240px;
            }
            59% {
                background: url("../image/gamebg.jpg") no-repeat -600px -240px;
            }
            60% {
                background: url("../image/gamebg.jpg") no-repeat -720px -240px;
            }
            69% {
                background: url("../image/gamebg.jpg") no-repeat -720px -240px;
            }
            70% {
                background: url("../image/gamebg.jpg") no-repeat -840px -240px;
            }
            79% {
                background: url("../image/gamebg.jpg") no-repeat -840px -240px;
            }
            80% {
                background: url("../image/gamebg.jpg") no-repeat -960px -240px;
            }
            89% {
                background: url("../image/gamebg.jpg") no-repeat -960px -240px;
            }
            90% {
                background: url("../image/gamebg.jpg") no-repeat -1080px -240px;
            }
            99% {
                background: url("../image/gamebg.jpg") no-repeat -1080px -240px;
            }

            100% {
                background: url("../image/gamebg.jpg") no-repeat -1200px -240px;
            }

        }
        div#d4{
                     border:solid 1px #333333;
                     width: 120px;
                     height: 120px;
                     background : url("../image/gamebg.jpg") no-repeat -0px -360px;

            animation: showme4 1s infinite;
                 }

        @keyframes showme4 {
            0% {
                background: url("../image/gamebg.jpg") no-repeat -0px -360px;
            }
            9% {
                background: url("../image/gamebg.jpg") no-repeat -0px -360px;
            }
            10% {
                background: url("../image/gamebg.jpg") no-repeat -120px -360px;
            }
            19% {
                background: url("../image/gamebg.jpg") no-repeat -120px -360px;
            }
            20% {
                background: url("../image/gamebg.jpg") no-repeat -240px -360px;
            }
            29% {
                background: url("../image/gamebg.jpg") no-repeat -240px -360px;
            }
            30% {
                background: url("../image/gamebg.jpg") no-repeat -360px -360px;
            }
            39% {
                background: url("../image/gamebg.jpg") no-repeat -360px -360px;
            }
            40% {
                background: url("../image/gamebg.jpg") no-repeat -480px -360px;
            }
            49% {
                background: url("../image/gamebg.jpg") no-repeat -480px -360px;
            }
            50% {
                background: url("../image/gamebg.jpg") no-repeat -600px -360px;
            }
            59% {
                background: url("../image/gamebg.jpg") no-repeat -600px -360px;
            }
            60% {
                background: url("../image/gamebg.jpg") no-repeat -720px -360px;
            }
            69% {
                background: url("../image/gamebg.jpg") no-repeat -720px -360px;
            }
            70% {
                background: url("../image/gamebg.jpg") no-repeat -840px -360px;
            }
            79% {
                background: url("../image/gamebg.jpg") no-repeat -840px -360px;
            }
            80% {
                background: url("../image/gamebg.jpg") no-repeat -960px -360px;
            }
            89% {
                background: url("../image/gamebg.jpg") no-repeat -960px -360px;
            }
            90% {
                background: url("../image/gamebg.jpg") no-repeat -1080px -360px;
            }
            99% {
                background: url("../image/gamebg.jpg") no-repeat -1080px -360px;
            }

            100% {
                background: url("../image/gamebg.jpg") no-repeat -1200px -360px;
            }

        }
        div#d5{
                        border:solid 1px #333333;
                        width: 120px;
                        height: 120px;
                        background : url("../image/gamebg.jpg") no-repeat -720px -120px;
                    }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9"></div>
</body>
</html>